<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Список всех книг</title>
    <style type="text/css">
        body {
            padding: 50px;
        }

        .books {
            border: 1px solid steelblue;
            width: 300px;
            border-collapse: collapse;
        }

        .books tr td, th {
            padding: 5px;
            border: 1px solid steelblue;
        }

        .books td:last-child, td:first-child {
            width: 50px;
        }

        h3 {
            background-image: url("../static/listmark.png");
            background-repeat: no-repeat;
            padding: 2px;
            padding-left: 30px;
        }

    </style>

    <style type="text/css" th:inline="text">
        [[h3]] {
            background-image: url([[@{/listmark.png}]]);
            background-repeat: no-repeat;
            padding: 2px;
            padding-left: 30px;
        }

    </style>
</head>
<body>

<h3 >Books:</h3>

<table class="books">
    <thead>
    <tr>
        <th >ID</th>
        <th >Название</th>
        <th >Автор (id)</th>
        <th >Жанр (id)</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="book : ${books}">
        <td th:text="${book.id}">1</td>
        <td th:text="${book.name}">Book name</td>
        <td th:text="${book.authorName} + ' (' + ${book.authorId} + ')'">Author name</td>
        <td th:text="${book.genreName}+ ' (' + ${book.genreId} + ')'">Genre</td>
        <td>
            <a th:href="@{/api/book/editPage/}+${book.id}" href="editPage.html">Edit</a>
        </td>
    </tr>
    </tbody>
</table>
<form id="show-book-form" action="showBook.html" th:action="@{/api/book/}" th:method="get">
    <h3>Поиск книги по id:</h3>
    <div class="row">
        <label for="id-input">ID:</label>
        <input id="id-input" type="text" name="id" required="true"/>
        <button type="submit">Найти</button>
    </div>
</form><br/>

<a href="addingPage.html" th:href="@{/api/book/addingPage}"><button type="button">Добавить книгу</button></a><br/>

<form id="delete-book-form" th:action="@{/api/book/delete}" th:method="post">
    <h3>Удаление книги по id:</h3>
    <div class="row">
        <label for="id-input-delete">ID:</label>
        <input id="id-input-delete" type="text" name="id" required="true"/>
        <button type="submit">Удалить</button>
    </div>
</form>
</body>
</html>
